.ag-aria-description-container {
    z-index: 9999;
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    height: 1px;
    width: 1px;
    position: absolute;
    overflow: hidden;
    padding: 0;
    white-space: nowrap;
}

.ag-unselectable {
    user-select: none;
}

.ag-selectable {
    user-select: text;
}

.ag-shake-left-to-right {
    animation-direction: alternate;
    animation-duration: 0.2s;
    animation-iteration-count: infinite;
    animation-name: ag-shake-left-to-right;
}

/* rtl:ignore */
@keyframes ag-shake-left-to-right {
    from {
        padding-left: 6px;
        padding-right: 2px;
    }

    to {
        padding-left: 2px;
        padding-right: 6px;
    }
}

/**
 ****************************
 * Viewports
 ****************************
 */
.ag-header-viewport,
.ag-floating-top-viewport,
.ag-body-viewport,
.ag-center-cols-viewport,
.ag-floating-bottom-viewport,
.ag-body-horizontal-scroll-viewport,
.ag-body-vertical-scroll-viewport,
.ag-sticky-top-viewport,
.ag-sticky-bottom-viewport {
    position: relative;
    height: 100%;
    min-width: 0;
    overflow: hidden;
    flex: 1 1 auto;
}

.ag-viewport {
    position: relative;
}

.ag-spanning-container {
    position: absolute;
    top: 0;

    /* z-index: 1 appears over editing rows but under dragging rows */
    z-index: 1;
}

.ag-body-viewport,
.ag-center-cols-viewport,
.ag-header-viewport,
.ag-floating-top-viewport,
.ag-floating-bottom-viewport,
.ag-sticky-top-viewport,
.ag-sticky-bottom-viewport {
    overflow-x: auto;

    &::-webkit-scrollbar {
        display: none !important;
    }

    -ms-overflow-style: none !important;
    scrollbar-width: none !important;
}

.ag-body-viewport {
    display: flex;
    overflow-x: hidden;

    &:where(.ag-layout-normal) {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* the sticky and pinned containers need at least one 1px height so we can set the
scrollLeft position when there are no rows within, otherwise scrollLeft will
always be 0 and then making a row sticky causes the grid to scroll. */
.ag-sticky-top-container,
.ag-sticky-bottom-container,
.ag-floating-top-container,
.ag-floating-bottom-container {
    min-height: 1px;
}

.ag-center-cols-viewport {
    min-height: 100%;
    width: 100%;
}

.ag-body-horizontal-scroll-viewport {
    overflow-x: scroll;
}

.ag-body-vertical-scroll-viewport {
    overflow-y: scroll;
}

/**
  ****************************
  * Containers
  ****************************
  */
.ag-header-container,
.ag-floating-top-container,
.ag-body-container,
.ag-pinned-right-cols-container,
.ag-center-cols-container,
.ag-pinned-left-cols-container,
.ag-floating-bottom-container,
.ag-body-horizontal-scroll-container,
.ag-body-vertical-scroll-container,
.ag-full-width-container,
.ag-floating-bottom-full-width-container,
.ag-sticky-top-container,
.ag-sticky-bottom-container {
    position: relative;
}

.ag-header-container,
.ag-floating-top-container,
.ag-pinned-left-floating-top,
.ag-pinned-right-floating-top,
.ag-floating-bottom-container,
.ag-pinned-left-floating-bottom,
.ag-pinned-right-floating-bottom,
.ag-sticky-top-container,
.ag-sticky-bottom-container {
    height: 100%;
    white-space: nowrap;
}

.ag-center-cols-container {
    display: block;
}

.ag-pinned-right-cols-container {
    display: block;
}

.ag-body-horizontal-scroll-container {
    height: 100%;
}

.ag-body-vertical-scroll-container {
    width: 100%;
}

.ag-full-width-container,
.ag-floating-top-full-width-container,
.ag-floating-bottom-full-width-container,
.ag-sticky-top-full-width-container,
.ag-sticky-bottom-full-width-container {
    position: absolute;
    top: 0;
    left: 0;

    /* turn off pointer events, because this container overlays the main row containers.
         so when user clicks on space between full width rows, we want the mouse clicks to
         pass onto the underlying container where the real rows are. eg if using full width
         for row grouping, the groups will be in the full width container, but when user
         opens a group the children are shown in the other containers - we want to make sure we
         don't block mouse clicks to those other containers with the children. */
    pointer-events: none;
}

.ag-full-width-container {
    width: 100%;
}

.ag-floating-bottom-full-width-container,
.ag-floating-top-full-width-container {
    display: inline-block;
    overflow: hidden;
    height: 100%;
    width: 100%;
}

/**
  ****************************
  * Scrollers
  ****************************
  */
.ag-body {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    flex-direction: row !important; /* we have to state this for rtl, otherwise row-reverse is inherited */
    min-height: 0;
}

.ag-body-horizontal-scroll,
.ag-body-vertical-scroll {
    min-height: 0;
    min-width: 0;
    display: flex;
    position: relative;

    &:where(.ag-scrollbar-invisible) {
        position: absolute;
        bottom: 0;

        &:where(.ag-apple-scrollbar) {
            opacity: 0;
            transition: opacity 400ms;
            visibility: hidden;

            &:where(.ag-scrollbar-scrolling, .ag-scrollbar-active) {
                visibility: visible;
                opacity: 1;
            }
        }
    }
}

.ag-body-horizontal-scroll {
    width: 100%;

    &:where(.ag-scrollbar-invisible) {
        left: 0;
        right: 0;
    }
}

.ag-body-vertical-scroll {
    height: 100%;

    &:where(.ag-scrollbar-invisible) {
        top: 0;
        z-index: 10;
        right: 0;
    }
}

.ag-force-vertical-scroll {
    overflow-y: scroll !important;
}

.ag-horizontal-left-spacer,
.ag-horizontal-right-spacer {
    height: 100%;
    min-width: 0;
    overflow-x: scroll;

    &:where(.ag-scroller-corner) {
        overflow-x: hidden;
    }
}

/**
  ****************************
  * Rows
  ****************************
  */
:where(.ag-row-animation) .ag-row {
    transition:
        transform 0.4s,
        top 0.4s,
        opacity 0.2s;

    /* for rows older than one second, we also animate the height. we don't include the height
       initially so we are not animating auto-height rows on initial render. */
    &:where(.ag-after-created) {
        transition:
            transform 0.4s,
            top 0.4s,
            height 0.4s,
            opacity 0.2s;
    }
}

:where(.ag-row-animation.ag-prevent-animation) .ag-row {
    transition: none !important;

    &:where(.ag-row.ag-after-created) {
        transition: none !important;
    }
}

:where(.ag-row-no-animation) .ag-row {
    transition: none;
}

.ag-row-loading {
    display: flex;
    align-items: center;
}

.ag-row-position-absolute {
    position: absolute;
}

.ag-row-position-relative {
    position: relative;
}

.ag-full-width-row {
    overflow: hidden;

    /* turn events back on, as we removed them in the parent */
    pointer-events: all;
}

.ag-row-inline-editing {
    z-index: 1;
}

.ag-row-dragging {
    z-index: 2;
}

.ag-stub-cell {
    display: flex;
    align-items: center;
}

/**
  ****************************
  * Cells
  ****************************
  */
.ag-cell {
    display: inline-block;
    position: absolute;
    white-space: nowrap;
    height: 100%;

    /* remove the box shadow added by default to all focussed divs because cells
       use a border only to indicate focus */
    &:focus-visible {
        box-shadow: none;
    }
}

/* This is used when using a Cell Wrapper (eg row drag, selection, or auto-height).
     If not using wrapper, ag-cell-value is on a div, which is 100% width. However when
     in a wrapper, it's a span (not a div), so we need 100% width to provide consistent
     behaviour regardless of wrapper used or not. If we did not do this, Cell Renderer's
     with 100% width wouldn't get the full width when using a wrapper.
     Instead of just 100% width we use flex, as it's not the only item on the line, so it
     fills the remaining space. */
.ag-cell-value {
    flex: 1 1 auto;
}

/* stylelint-disable-next-line selector-max-specificity */
.ag-cell-value:not(.ag-allow-overflow),
.ag-group-value {
    overflow: hidden;
    text-overflow: ellipsis;
}

.ag-cell-wrap-text {
    white-space: normal;
    word-break: break-word;
}

:where(.ag-cell) .ag-icon {
    display: inline-block;
    vertical-align: middle;
}

/**
  ****************************
  * Floating Top and Bottom
  ****************************
  */
.ag-floating-top {
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
    position: relative;
    display: flex;
}

:where(.ag-floating-top:not(.ag-invisible)) {
    border-bottom: var(--ag-pinned-row-border);
}

.ag-floating-bottom {
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
    position: relative;
    display: flex;
}

:where(.ag-floating-bottom:not(.ag-invisible)) {
    border-top: var(--ag-pinned-row-border);
}

/**
  ****************************
  * Sticky Top
  ****************************
  */
.ag-sticky-top,
.ag-sticky-bottom {
    position: absolute;
    display: flex;
    width: 100%;
    overflow: hidden;
    height: 0;
    background-color: var(--ag-data-background-color);

    /* sticky containers need to appear over spanned and edited rows */
    z-index: 1;
}

.ag-sticky-bottom {
    box-sizing: content-box !important;
    border-top: var(--ag-row-border);
}

.ag-opacity-zero {
    opacity: 0 !important;
}

.ag-cell-label-container {
    display: flex;
    justify-content: space-between;
    flex-direction: row-reverse;
    align-items: center;
    height: 100%;
    width: 100%;
}

:where(.ag-right-aligned-header) {
    .ag-cell-label-container {
        flex-direction: row;
    }

    .ag-header-cell-text {
        text-align: end;
    }
}

/**
  ****************************
  * Widgets
  ****************************
  */

.ag-column-group-icons {
    display: block;

    > * {
        cursor: pointer;
    }
}

:where(.ag-ltr) {
    direction: ltr;

    .ag-body,
    .ag-floating-top,
    .ag-floating-bottom,
    .ag-header,
    .ag-sticky-top,
    .ag-sticky-bottom,
    .ag-body-viewport,
    .ag-body-horizontal-scroll {
        flex-direction: row;
    }
}

:where(.ag-rtl) {
    direction: rtl;
    text-align: right;

    .ag-body,
    .ag-floating-top,
    .ag-floating-bottom,
    .ag-header,
    .ag-sticky-top,
    .ag-sticky-bottom,
    .ag-body-viewport,
    .ag-body-horizontal-scroll {
        flex-direction: row-reverse;
    }

    .ag-icon-contracted,
    .ag-icon-expanded,
    .ag-icon-tree-closed {
        display: block;
        transform: rotate(180deg);
    }
}
